<template>
  <div class="aclassify">
    <div class="aclassifyNavBar">
      <van-nav-bar title="一级分类" :border="false">
        <template #right>
          <van-icon name="search" color="black" size="25" @click="goSearch" />
        </template>
      </van-nav-bar>
    </div>
    <van-pull-refresh :value="true" animation-duration="200" success-text="刷新成功">
      <div class="aclassifyTab">
        <van-tabs 
        v-model="active" 
        color="#00BF42" 
        title-active-color="black" 
        :border="false">
          <van-tab title="推荐"></van-tab>
          <van-tab
            :title="aclasstab.categoryName"
            v-for="(aclasstab,ifytab) in aclasstab"
            :key="ifytab"
          ></van-tab>
        </van-tabs>
      </div>
      <div class="aclassifySwiper">
        <van-swipe @change="onChange" autoplay="3000">
          <van-swipe-item v-for="(swiper,i) in swiper" :key="i">
            <img :src="swiper.pic" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/{{swiper.length}}</div>
          </template>
        </van-swipe>
      </div>
      <div class="aclassifyClassify">
        <van-swipe :loop="false" :width="80" :show-indicators="false">
          <van-swipe-item
            v-for="(classify,fiy) in classify"
            :key="fiy"
            class="classifyfor"
            @click="$router.push('/twoClassify')"
          >
            <img :src="classify.images">
            <p>{{classify.title}}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div 
      class="aclassifyInform" 
      v-for="(Information,acsinfo) in Information" 
      :key="acsinfo" 
      @click="goAdvisory"
      mode="link"
      >
        <van-notice-bar :text="Information.title" left-icon="volume-o" mode="link" />
      </div>
      <div class="aclassifyLowprice">
        <div class="aclassifyLowpriceHand">
          <img src="../../assets/images/time.png" />
          <span class="aclassifyLowpriceHandTitle">特价促销</span>
          <van-count-down :time="time" class="aclassifyLowpriceHandTimeout">
            <template v-slot="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <span class="aclassifyLowpriceHandslogan" @click="goLowprice">数量有限，抢到就是赚到</span>
        </div>
        <div class="aclassifyLowpriceButtom">
          <van-swipe :loop="false" :width="115" :show-indicators="false">
            <van-swipe-item
              v-for="(commodity,com) in commodity"
              :key="com"
              class="aclassifyLowpricefor"
               @click="$router.push(`/goodsDetail?id=${commodity.id}&productType=3`)"
            >
              <img :src="commodity.mainPic" class="shoppingImage" />
              <p class="aclassifyLowpriceButtomTitle">{{commodity.productName}}</p>
              <span class="aclassifyLowpriceButtomOnsale">月售:{{commodity.salesVolume}}</span>
              <span class="aclassifyLowpriceButtomOnlysell">仅售:{{commodity.productStock}}</span>
              <p class="aclassifyLowpriceButtomPrice">￥{{commodity.productPrice}}元</p>
              <!-- <span class="aclassifyLowpriceButtomOgl">{{commodity.originalcost}}</span> -->
              <img src="../../assets/images/add.png" class="shppingAdd" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="aclassifyGroup">
        <div class="aclassifyGroupHand">
          <span class="aclassifyGroupHandTitle">团购</span>
          <span class="aclassifyGroupHandslogan" @click="goGroupbuying">团的越多赚得越多</span>
        </div>
        <div class="aclassifyGroupBottom">
          <groupGoods :groupGoods="groupGoods"></groupGoods>
        </div>
      </div>
      <div class="advertising">
        <img src="../../assets/images/gg.png" />
      </div>
      <div class="aclassifyGroupAdd">
        <div class="aclassifyAddHand">
          <span class="aclassifyGroupAddTitle">今日推荐</span>
          <span class="aclassifyGroupAddslogan">更多</span>
        </div>
        <div class="aclassifyAddBottom">
            <van-list
            :immediate-check="false"
            :offset="10"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="pullLoad"
          >
            <div v-for="(item, i) in aclassrecommend" :key="i">
              <goodsComponent :addGoods="item" />
            </div>
          </van-list>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import goodsComponent from "../../components/goodsComponent"
import groupGoods from "../../components/groupGoods"
import { shoppingService } from "@/api"
export default {
  name: "home",
  data() {
    return {
      active: 0,
      current: 0,
      time: 30 * 60 * 60 * 1000,
      aclasstab:[],
      aclassrecommend: [],
      swiper: [],
      recommend: false,
      loading: false,
      finished: false,
      classify: [
        {
          images: require("../../assets/images/zwt.png"),
          title: "玫瑰"
        },
        {
          images: require("../../assets/images/home_pi.png"),
          title: "康乃馨"
        },
        {
          images: require("../../assets/images/home_pi(2).png"),
          title: "菊类"
        },
        {
          images: require("../../assets/images/zwt.png"),
          title: "百合"
        },
        {
          images: require("../../assets/images/home_pi.png"),
          title: "洋桔梗"
        },
        {
          images: require("../../assets/images/zwt.png"),
          title: "野花"
        },
      ],
      commodity: [],
      groupGoods: [],
      auctionGoods: [],
      Information:[],
      param: {
        page: 1,
        pageSize: 10
      }
    };
  },
  created(){
    this.asgetClassifyTab();
    this.asgetSlideAdvers();
    this.asgetInformation();
    this.asgetaclassspecial();
    this.asgetgrouppecial();
    this.asgetaclasssRecommend();
  },
  methods: {
    // 上拉分页
    pullLoad() {
      this.param.page = this.param.page + 1;
      this.finished =
      this.total <= this.param.page * this.param.pageSize;
      this.asgetaclasssRecommend();
    },
    // 轮播图
    onChange(index) {
      this.current = index;
    },
    
    // 获取广告列表
    async asgetSlideAdvers() {
      const { data } = await shoppingService.getSlideAdvers(2);
      this.swiper = data;
    },
    // 获取分类列表
    async asgetClassifyTab(){
      const { data } = await shoppingService.getClassifyTab(0);
      this.aclasstab = data;
    },
    // 商品特价列表
    async asgetaclassspecial(){
      const { data } = await shoppingService.getaclassspecial(this.$route.query.id,1,10,3,0,1);
      console.log(data,"特价列表")
      this.commodity = data.list
    },
    // 商品团购表
    async asgetgrouppecial(){
      const { data } = await shoppingService.getgrouppecial(this.$route.query.id,1,10,2,0,1);
      console.log(data,"团购列表")
      this.groupGoods = data.list;
    },
    // 获取资讯
    async asgetInformation() {
      const { data } = await shoppingService.getInformation();
      console.log(data, "资讯");
      this.Information = data;
    },
    // 前往资讯详情
    goAdvisory() {
      this.$router.push({
        path: "/advisory",
        query: { id: this.Information[0].id }
      });
      console.log(this.Information[0].id);
    },
    // 获取今日推荐列表
    async asgetaclasssRecommend(){
      const { data } = await shoppingService.getaclasssRecommend(this.$route.query.id,1,10);
      console.log(data,"今日推荐")
      this.aclassrecommend = data.list;
       this.loading = false
    },
    // 前往搜索
    goSearch(){
      this.$router.push({
        path: "/search"
      })
    },
    // 前往商品列表
    goShoppingList() {
      this.$router.push({ path: "/shoppingList" });
    },
    // 前往团购页
    goGroupbuying() {
      this.$router.push({ path: "/groupbuying", query:{id:this.aclasstab.id} });
    },
    // 前往特价促销
    goLowprice() {
      this.$router.push({ path: "/lowPrice", query:{id:this.aclasstab.id} });
    },
    // 前往在线拍卖
    goOnlineAuction() {
      this.$router.push({ path: "/onlineAuction" });
    },
    // 前往在线竞标
    goPurchase() {
      this.$router.push({ path: "/purchase" });
    },
    // 前往商品录入
    gospgentering() {
      this.$router.push({ path: "/spgentering" });
    },
    goselect() {
      this.$router.push({ path: "/select" });
    }
  },
  components: {
    goodsComponent,
    groupGoods,
  }
};
</script>

<style lang='scss' scoped>
* {
  overflow-x: hidden;
  overflow-y: hidden;
}
.aclassify {
  background-color: rgba(247, 249, 252, 1);
}
.aclassifyNavBar {
}
.aclassifyTab {
  background-color: #fff;
}
.aclassifySwiper {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  background-color: #fff;
}
.aclassifySwiper img {
  width: 95%;
  height: 155px;
}
.custom-indicator {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 2px 5px;
  font-size: 15px;
  background-color: #69413e;
  color: #fff;
  border-radius: 20px;
}
.aclassifyLowprice {

  background-color: #fff;
  padding: 10px;
}
.aclassifyLowpriceHand {
  margin-left: 20px;
  width: 100%;
}
.aclassifyLowpriceHand img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.aclassifyLowpriceHandTitle {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  vertical-align: middle;
}
.aclassifyLowpriceHandslogan {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-left: 32px;
}
.aclassifyLowpriceHandTimeout {
  display: inline;
  vertical-align: middle;
}
.colon {
  display: inline-block;
  color: #ff586d;
}
.block {
  display: inline-block;
  width: 20px;
  color: #fff;
  font-size: 15px;
  text-align: center;
  background-color: #ff586d;
  border-radius: 5px;
}
.aclassifyLowpriceButtom {
  overflow-x: hidden;
  margin-top: 20px;
}
.aclassifyLowpricefor {
  margin: 0 15px;
}
.classifyfor{
  text-align: center;
  margin: 10px 0px;
}
.classifyfor p{
  white-space: nowrap;
  font-size:10px;
  font-weight:bold;
  color:rgba(51,51,51,1);
}
.classifyfor img{
  width: 45px;
  height: 45px;
  border-radius: 50px;
}
.shoppingImage {
  width: 116px;
  height: 116px;
  vertical-align: middle;
}
.aclassifyLowpriceButtomTitle {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  vertical-align: middle;
}
.aclassifyLowpriceButtomOnsale {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
}
.aclassifyLowpriceButtomOnlysell {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
}
.aclassifyLowpriceButtomPrice {
  font-size: 18px;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
  display: inline;
}
.aclassifyLowpriceButtomOgl {
  font-size: 10px;
  font-weight: 500;
  text-decoration: line-through;
  color: rgba(169, 174, 192, 1);
}
.shppingAdd {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: 7px;
}
.aclassifyGroup {
  margin-top: 21px;
}
.aclassifyGroupHandTitle {
  font-size: 15px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: 15px;
}
.aclassifyGroupHandslogan {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-left: 211px;
}
.advertising {
  width: 100%;
}
.advertising img {
  width: 90%;
  margin: 0 21px;
  margin-top: 21px;
}
.aclassifyGroupAdd {
  margin-top: 18px;
}
.aclassifyGroupAddTitle {
  font-size: 15px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: 15px;
}
.aclassifyGroupAddslogan {
  font-size: 10px;
  font-weight: 500;
  color: rgba(169, 174, 192, 1);
  margin-left: 251px;
}
</style>
